<template>
  <div class="app-container">
    <div class="container-module">
      <div class="title-module">活动列表</div>
      <div class="search-module">
        <el-form
          :inline="true"
          class="search-form"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <div class="flex-between">
            <div>
              <el-form-item
                label="活动名称"
                class="search-form-item"
                prop="activity_name"
              >
                <el-input
                  placeholder="请输入活动名称"
                  v-model="searchForm.activity_name"
                >
                </el-input>
              </el-form-item>
              <!-- <el-form-item
                label="生效区域"
                class="search-form-item"
                prop="region"
              >
                <el-cascader
                  filterable
                  v-model="searchForm.user_area"
                  style="width: 100%"
                  :options="regionList"
                  collapse-tags
                  :props="{
                    expandTrigger: 'hover',
                    multiple: true,
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false,
                    emitPath: false,
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item
                label="用户群组"
                class="search-form-item"
                prop="group"
              >
                <el-select
                  clearable
                  v-model="searchForm.user_group"
                  multiple
                  collapse-tags
                  placeholder="请选择用户群组"
                >
                  <el-option
                    v-for="item in groupingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item
                label="活动状态"
                class="search-form-item"
                prop="status"
              >
                <el-select v-model="searchForm.status" placeholder="请选择状态">
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="创建时间"
                class="search-form-item"
                prop="time"
              >
                <el-date-picker
                  clearable
                  @change="timeWay"
                  value-format="yyyy-MM-dd HH:mm"
                  v-model="searchForm.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="button-box">
              <el-button
                @click="getListWay"
                type="primary"
                icon="el-icon-search"
                class="inquire-box marginBottom-10"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh-left"
                class="reset-box"
                @click="resetForm('searchForm')"
                >重置</el-button
              >
            </div>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="table-module">
        <div class="table-top flex-between">
          <div class="flex button-box">
            <el-button
              @click="addDetail('新建活动')"
              type="primary"
              icon="el-icon-plus"
              class="inquire-box marginRight-10"
              >新建</el-button
            >
            <el-button class="reset-box">活动分析</el-button>
          </div>
          <div class="flex button-box">
            <el-button
              class="reset-box marginRight-10"
              icon="el-icon-download"
              style="height: 30px"
              >下载</el-button
            >
          </div>
        </div>
        <el-row>
          <el-col>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="dataList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                :min-width="tableTheadOptions[fruit].minwidth"
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'status'">
                    <el-tag v-if="scope.row.status == -1" type="danger"
                      >活动结束</el-tag
                    >
                    <el-tag v-if="scope.row.status == 1" type="success"
                      >已开启</el-tag
                    >
                    <el-tag v-if="scope.row.status == 2" type="warning"
                      >已关闭</el-tag
                    >
                    <el-tag v-if="scope.row.status == 3" type="success"
                      >进行中</el-tag
                    >
                  </div>
                  <div v-else-if="fruit == 'region'">
                    <!-- 生效地区：提示多个区域需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->

                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="
                        scope.row.area_name
                          ? scope.row.area_name.toString()
                          : ''
                      "
                      placement="top"
                    >
                      <div
                        v-if="
                          scope.row.area_name
                            ? scope.row.area_name.length !== 0
                            : false
                        "
                        style="display: flex; justify-content: center"
                      >
                        <div
                          v-if="index < 3"
                          v-for="(item, index) in scope.row.area_name
                            ? scope.row.area_name
                            : []"
                          :key="index"
                        >
                          {{ item }} /
                        </div>
                        <div
                          v-if="
                            scope.row.area_name
                              ? scope.row.area_name.length > 3
                              : false
                          "
                          class="table-num"
                        >
                          + {{ scope.row.area_name.length }}
                        </div>
                      </div>
                    </el-tooltip>
                  </div>
                  <div
                    v-else-if="fruit == 'user_group'"
                    style="display: flex; justify-content: center"
                  >
                    <!-- 用户群组：提示多个区域需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="
                        scope.row.group_name
                          ? scope.row.group_name.join('/')
                          : ''
                      "
                      placement="top"
                    >
                      <div
                        v-if="
                          scope.row.group_name
                            ? scope.row.group_name.length !== 0
                            : false
                        "
                        style="display: flex; justify-content: center"
                      >
                        <div
                          v-if="index < 3"
                          v-for="(item, index) in scope.row.group_name"
                          :key="index"
                        >
                          {{ item }} /
                        </div>
                        <div
                          v-if="scope.row.group_name.length > 3"
                          class="table-num"
                        >
                          + {{ scope.row.group_name.length }}
                        </div>
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    {{ scope.row[fruit] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                width="220"
                prop="address"
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    style="margin: 5px"
                    v-if="scope.row.status == 1 || scope.row.status == 3"
                    type="warning"
                    size="mini"
                    @click="saveStatus(scope.row, 2)"
                  >
                    关闭活动
                  </el-button>
                  <el-button
                    style="margin: 5px"
                    v-if="scope.row.status == 2"
                    type="success"
                    size="mini"
                    @click="saveStatus(scope.row, 1)"
                  >
                    开启活动
                  </el-button>
                  <el-button
                    style="margin: 5px"
                    type="primary"
                    size="mini"
                    @click="viewDetail(scope.row)"
                  >
                    查看
                  </el-button>

                  <el-popconfirm
                    title="这是一段内容确定删除吗？"
                    @confirm="deleteCoupon(scope.row)"
                  >
                    <el-button
                      style="margin: 5px"
                      type="danger"
                      size="mini"
                      slot="reference"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getListWay"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 详情抽屉 -->
    <detail
      ref="detail"
      v-if="ifShowDetail"
      :regionList="regionList"
      :gradeList="gradeList"
      :TagCategoryAll="TagCategoryAll"
      :groupingList="groupingList"
      :detailTitle="detailTitle"
    />
  </div>
</template>
<script>
import {
  getInviteActivityList,
  getInviteActivityInfo,
  delInviteActivity,
  editActivityStatus,
} from "@/api/activity/index";
import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
// 引入
import detail from "./detail";
const tableTheadOption = {
  id: {
    label: "活动编号",
    field: "id",
    minwidth: "80",
  },
  activity_name: {
    label: "活动名称",
    field: "activity_name",
    minwidth: "120",
  },
  region: {
    label: "生效地区",
    field: "description",
    minwidth: "150",
  },
  Participants_Number: {
    label: "参与人数",
    field: "Participants_Number",
    minwidth: "100",
  },
  user_group: {
    label: "用户群组",
    field: "user_group",
    minwidth: "150",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
    minwidth: "120",
  },
  status: {
    label: "活动状态",
    field: "status",
    minwidth: "80",
  },
};
const defaultTableThead = [
  "id",
  "activity_name",
  "region",
  "Participants_Number",
  "user_group",
  "status",
  "created_at",
];
export default {
  components: {
    detail,
  },
  data() {
    return {
      ifShowDetail: false, //是否打开详情抽屉
      detailTitle: "", //抽屉标题
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true,
      regionList: [], // 省市
      gradeList: [], // 等级
      TagCategoryAll: [], // 标签
      groupingList: [], // 分组
      status: [
        { name: "过期", id: "-1" },
        { name: "开启", id: "1" },
        { name: "进行中", id: "2" },
        { name: "关闭", id: "3" },
      ],
      searchForm: {
        activity_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2关闭 3进行中
        time_start: "",
        time_end: "",
        page: 1,
        count: 10,
        time: [],
      },
      dataList: [],
      total: 0,
    };
  },
  created() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });
    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });
    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });
    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = true;
      });
  },
  methods: {
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    //打开抽屉
    addDetail(title) {
      this.detailTitle = title;
      this.ifShowDetail = true;
    },
    viewDetail(row) {
      this.detailTitle = "活动信息";
      this.ifShowDetail = true;
      this.$nextTick(() => {
        this.$refs.detail.getAwardInfoWay(row);
      });
    },
    //关闭抽屉
    closedetail() {
      this.ifShowDetail = false;
      this.getListWay();
    },
    getListWay() {
      this.loading = true;
      getInviteActivityList(this.searchForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.dataList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    resetting() {
      this.searchForm = {
        activity_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2关闭 3进行中
        time_start: "",
        time_end: "",
        page: 1,
        count: 10,
        time: [],
      };
      this.getListWay();
    },
    // 选择日期
    timeWay(val) {
      this.searchForm.time_start = val[0];
      this.searchForm.time_end = val[1];
    },
    deleteCoupon(row) {
      this.loading = true;
      delInviteActivity({ activity_id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    // 修改状态
    saveStatus(row, num) {
      var obj = {
        activity_id: row.id,
        status: num,
      };
      this.loading = true;
      editActivityStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("操作成功");
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;

  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }

  .el-input {
    width: 180px;
  }
}
</style>
<style lang="scss" scoped>
.marginBottom-10 {
  margin-bottom: 10px;
}

.marginRight-10 {
  margin-right: 10px;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;

  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }

  .reset-box {
    background: #eeeeee;
  }
}

.app-container {
  background: #f3f5f7;

  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;

    .title-module {
      font-size: 18px;
    }

    .search-module {
      padding-top: 20px;
      display: block;
    }

    .table-module {
      .table-top {
        margin-bottom: 20px;
      }

      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>